<template>
  <div>
    <el-dialog
      :title="$t('common.base.adjustPriority')"
      :visible.sync="show"
      width="440px"
    >
      <div class="order-container">
        <el-form
          :model="orderForm"
          :rules="orderRules"
          ref="orderForm"
          class="add-type-form"
          label-position="top"
        >
          <el-form-item :label="$t('product.placeholder.orderPlaceholder')" prop="number">
            <el-input-number
              style="width: 100%"
              controls-position="right"
              class="num_add"
              v-model="orderForm.number"
              :step="1"
              :min="1"
            ></el-input-number>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="show = false">{{
          $t('common.base.cancel')
        }}</el-button>
        <el-button type="primary" @click="save">{{
          $t('common.base.makeSure')
        }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'order-material',
  props: {},
  data() {
    return {
      show: false,
      row: {},
      orderForm: { number: '' },
      orderRules: {
        number: [
          { required: true, message: this.$t('product.placeholder.orderPlaceholder'), trigger: 'blur' }
        ]
      }
    };
  },
  watch: {},
  methods: {
    open(row) {
      this.row = row;
      this.show = true;
      this.orderForm.number = row.currentSort;
    },
    save() {
      this.$refs.orderForm.validate(valid => {
        if (valid) {
          this.show = false;
          this.$emit('save', { row: this.row, number: this.orderForm.number });
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.order-container {
  padding: 10px;
  ::v-deep .el-input-number.is-controls-right .el-input__inner {
    text-align: left !important;
  }
}
</style>
